Krypton DHTML Library

bgcolor="#FFFFFF">

Krypton DHTML Library (No Longer Under Development!)

Purpose: Krypton is designed to simplify programming in DHTML, reduce time spent programing, increase page load times, extend the capabilities of JavaScript, and to create a set of unified syntax which can be used on all major browsers version 4.0 or higher.

Simplify programming in DHTML
- Krypton is completely object-oriented.
- Syntax names are almost self explanatory.
- After the library is linked to a document, the new syntax are automatically available to the programmer.
Reduce time spent programming
- Many of the more complicated algorithms have already been incorporated into the library.
- There are no initializations of new objects DIV objects because they are already initialize once the page has loaded
- The syntax mimics the behaviors of true Java programming
Reduce page load times
- Even though the library is a beast in size, the library is cached(stored) on a users hard drive so it only has to be downloaded once.
Extend the capabilities of JavaScript
- Event capture functions
- multiple applications for the same function name
Unified Syntax
- Krypton is compatible with IE4,IE5,NS4,NS5, and NS6
- Speed and behaviors will vary from browser to browser.

Linking libraries into HTML documents: Krypton is broken up into several smaller .lib files. The main file is called kernel.lib and is required to run all other libraries. The libraries can be imported into an HTML document like so:

<HTML>
  <HEAD>
    <TITLE>PAGE 1</TITLE>
    <SCRIPT LANGUAGE="JavaScript1.2" SRC="kernel.lib"></script>
    <SCRIPT LANGUAGE="JavaScript1.2" SRC="slide.lib"></script>
    <SCRIPT LANGUAGE="JavaScript1.2" SRC="events.lib"></script>
    <script>
      <!-- Your JavaScript code//-->
    </script>
  </HEAD>
  <BODY>
  ...
  </BODY>
</HTML>
Remember that kernel.lib must be the first library file you import!

Terminology of the tutorials:
Variables with quotes around them indicate a variable containing text. If the variable does not have quotes, then the variable is a number. For example, write("HTML") indicates that the value submitted to the function must be text where as x(coordinate) indicates coordinate is a number. Any functions that have a variable name, an equal sign, and then a function will return a value. For example in x_coord=div("name").x(), div("name").x() will return a value.

Objects are a way of describing a tree structure, or hierarchy, of functions with different sub functions. For instance, say the object obj has a collection of functions associated with it. To reference those functions we type obj plus a "." plus the function name. For example, obj.test_function(). There could be multiple declarations of test_function() but they could belong to different objects. This is very useful simplification. Krypton uses objects readily. div("name") returns an object that can be used to reference functions contained by that object. For instance, div("name").write("TEXT"). Throughout JavaScript there are many objects built into the language. For instance, document.write(), document.forms[0].elements[0].value, window.status, exc...

Abstract functions are functions that you declare on the page which are automatically called if they exist. This is done by writing a null function or a function that doesn't do anything. For example, abs_func=new Function(). When you declare this function again, you override abs_func and the new function is run. The null function is necessary to prevent the browser from giving an error. In Krypton, abstract functions are used to indicate when events happen such as mouseMove(), loaded(),and keyDown(). An example of this would be
function mouseMove(x,y){
window.status="Mouse coordinates="+x+","+y
}

The lib object is an object for universal variables and functions to be stored that are used in Krypton. This was done to prevent a programmer from using the same variable names as those used by Krypton and having weird things happen. An example of a universal variable would be lib.browserWidth or lib.divList[].

Library Tutorials:
Kernel.lib (view source)
- Necessary functions and predefined variables for DHTML
Slide.lib (view source)
- Move a DIV across the screen in a straight line.
MoveTo.lib (view source)
- Move a DIV along a set of points.
Wipe.lib (view source)
- Incrementally change the clip value on a DIV.
Events.lib (view source)
- Manipulate keyboard and mouse input.
Create.lib (view source)
- Create new DIVs using JavaScript.
Scroll.lib (view source)
- Create and area for scrolling a DIV
Drag.lib (view source)
- Drag a DIV around the screen.
loadPage.lib (view source)
- Load an external HTML page into a DIV.